<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="handleUpdateProduct()"
        size="mini">
        添加
      </el-button>
    </el-card>

    <el-table ref="productTable"
              style="width: 100%"
              :data="productList"
              border>
      <el-table-column type="selection" width="60" align="center"></el-table-column>
      <el-table-column label="商品分类编号" width="100" prop="kindsId" align="center">
      </el-table-column>
      <el-table-column label="商品分类名称" width="100" prop="kindsName" align="center">
      </el-table-column>
      <el-table-column label="设置" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="getAttrList(scope.$index, scope.row)">属性列表
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="100" prop="kindsSort" align="center">
      </el-table-column>

      <el-table-column label="创建人" width="100" prop="createAdmin.adminAccount" align="center">
      </el-table-column>
      <el-table-column label="创建时间" width="100" :formatter="dateFormatter" prop="kindsCreateTime" align="center">
      </el-table-column>
      <el-table-column label="更新人" width="100" prop="updateAdmin.adminAccount" align="center">
      </el-table-column>
      <el-table-column label="更新时间" width="100" :formatter="dateFormatter" prop="updateTime" align="center">
      </el-table-column>
      <el-table-column label="是否启用" width="200" prop="kindStatus" align="center">
        <template slot-scope="scope">
          <p>
          <el-radio-group v-model="scope.row.kindStatus" @change="handleDelete(scope.$index, scope.row)">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <p>
            <el-button
              size="mini"
              @click="handleUpdateProduct(scope.$index, scope.row)">编辑
            </el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrCatForm":model="kindsForm" :rules="rules" label-width="120px">

        <el-form-item label="商品分类编号" prop="kindsId" v-show="false">
          <el-input v-model="kindsForm.kindsId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品分类名称" prop="kindsName">
          <el-input v-model="kindsForm.kindsName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(kindsForm)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: "kindsList",
    data() {
      return{
        productList:[],
        kindStatus:false,
        dialogTitle:"",
        dialogVisible:false,
        kindsForm:{
          kindsId:'',
          kindsName:'',
        },
        rules: {
          kindsName: [
            { required: true, message: '请输入类型名称', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      console.log("*********")
      this.getList();
    },
    methods: {
      handleConfirm(kindsForm){
        if(this.dialogTitle=="添加"){
          this.$axios({
            method: 'post',
            url: 'http://localhost:8101/kinds/add',
            params: {
                kindsName:kindsForm.kindsName,
                createBy:1,
                updateBy:1
            }
          }).then(result=>{
            this.dialogVisible=false;
            this.getList();
          })
        }else if(this.dialogTitle=="编辑"){
          console.log(kindsForm.kindsName)
          this.$axios({
            method: 'post',
            url: 'http://localhost:8101/kinds/amend',
            params: {
              kindsId:kindsForm.kindsId,
              kindsName:kindsForm.kindsName,
              updateBy:1
            }
          }).then(result=>{
            this.dialogVisible=false;
            this.getList();
          })
        }

      },
      dateFormatter(row, column){
        var date = row[column.property];
        if(date == undefined){return ''};
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      getAttrList(index, row) {
        this.$router.push({path:'/attr/spuAttrList',query:{kindsId:row.kindsId}})
      },
      getList() {
          this.$axios.get("http://localhost:8101/kinds/findAll",{
           /* params:{
              page:1,
              rows:20
            }*/
          }).then(result=>{
            this.productList=result.data;
          })
      },
      /*删除*/
      handleDelete(index, row){
        var kindStatus=row.kindStatus==1?1:0;
        console.log(kindStatus)
        this.$axios({
          method: 'post',
          url: 'http://localhost:8101/kinds/del',
          params: {
            kindsId:row.kindsId,
            kindStatus:kindStatus,
            updateBy:1
          }
        }).then(result=>{
          this.getList();
        })
      },
      /*编辑*/
      handleUpdateProduct(index,row){
        this.dialogVisible=true;
        if(row==undefined||row==''){
          this.dialogTitle="添加";
          this.kindsForm.kindsName='';
          this.kindsForm.kindsId='';
        }else{
          this.dialogTitle="编辑";
          this.kindsForm.kindsId=row.kindsId;
          this.kindsForm.kindsName=row.kindsName;
        }
      },
      /*查看单条*/
      handleShowProduct(index,row){
        console.log("handleShowKinds",row);
      },

    }
  }
</script>

<style scoped>

</style>
